<!--红云超市-->
<template>
  <article class="page" style="overflow-y: hidden;">
    <div class="head-wrap">
      <div class="header">
        <div @click="back()" class="back"><span class="arrow"></span></div>
        <div class="head-bd">红云超市</div>
        <!--        新超市-->
        <div  v-if="true" @click="exchangeRecord()" class="message">
          <!--        正常超市-->
<!--        <div v-if="getKey==='0'" @click="exchangeRecord()" class="message">-->
<!--          <div class="head-btn-text">积分明细</div>-->
          <div class="head-btn-text">兑换记录</div>
        </div>
      </div>
    </div>
    <section class="mine-page">
      <supermarketHead ref="refresh"></supermarketHead>
      <section class="block zhunong-list" v-if="mallGetStore">
        <div class="ticketInfo" @click="mallDetail(agriculture)">
          <img :src="agriculture.url" alt=""/>
        </div>
      </section>
      <ul class="top-menu">
        <li v-if="routeNameList.length>0" @click="goTo(1)" :class="{ active: routeName == '1' }">
          <span>红云热兑</span>
        </li>
        <li
          @click="goTo(item.key)"
          :class="{
            active: routeName == item.key,
            'form-Only': readOnly == true,
          }"
          v-for="(item, index) in routeNameList"
          :key="item.key"
        >
          <span>{{ item.value }}</span>
        </li>
        <fetchData
          v-if="isLoadingTop"
          :loading="isLoading"
          :data="routeNameList"
        ></fetchData>
        <!--<li @click="goTo(5)"  :class="{ active: routeName == '5' }"><span>课程体验</span></li>
       <li @click="goTo(6)"  :class="{ active: routeName == '6' }"><span>课程体验</span></li>
       <li @click="goTo(7)"  :class="{ active: routeName == '7' }"><span>课程体验</span></li>-->
      </ul>

      <cube-slide
        ref="slide"
        :loop="loop"
        :initial-index="0"
        :auto-play="autoPlay"
        :show-dots="showDots"
        :options="slideOptions"
        @change="changePage"
        v-if="routeNameList.length > 0"
      >
        <fetchData
          class="detail"
          :loading="isLoading"
          :data="routeNameList"
        ></fetchData>
        <cube-slide-item>
          <section>
            <div class="screen">
              <ul class="screen-menu">
                <li
                  v-for="(item, index) in slider"
                  @click="go(item, index)"
                  :key="index"
                  :class="{ active: currentIndex == index }"
                >
                  <span>{{ item.title }}</span>
                </li>
              </ul>
            </div>
            <section class="screen-main">
              <div class="d-scroll-2head list-text" style>
                <cube-scroll
                  ref="scroll"
                  :options="options"
                  @pulling-up="onPullingUp"
                  @pulling-down="onPullingDown"

                >
                  <section class="block goods-list" v-if="isShowbdt">
                    <div class="ticketInfo" @click="exchange(ticketInfo)">
                      <img :src="ticketInfo.pic" alt=""/>
                    </div>
                  </section>
                  <fetchData
                    v-if="isLoading"
                    :loading="isLoading"
                    :data="swipeData"
                  ></fetchData>
                  <div class="swipe-box">
                    <div
                      class="box"
                      v-for="(data, index) in swipeData"
                      :key="index"
                    >
                      <div class="item" @click="exchange(data)">
                        <img class="item-img" :src="data.pic" alt=""/>
                        <div class="item-info">
                          <span class="left">{{ data.productName }}</span>
                        </div>
                        <p class="tip" v-html="data.storeName"></p>
                        <div class="tip">
                          <span class="tip-num">{{ data.pointPrice }}</span
                          >积分
                          <div class="right">
                            库存<span> {{ data.nowStock }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="water-logo"
                    v-if="!isLoading && !isShowbdt && swipeData.length == 0"
                  >
                    <img
                      src="static/images/dangjian/home/water-logo-comment.png"
                      alt=""
                    />
                  </div>
                  <div class="pdv-10"></div>
                  <div class="pdv-10"></div>
                  <div class="pdv-10"></div>
                  <div class="pdv-10"></div>
                  <div class="pdv-6"></div>
                </cube-scroll>
              </div>
            </section>
          </section>
        </cube-slide-item>
        <cube-slide-item v-for="(item, index) in routeNameList" :key="index">
          <happyShopping :num="item.key"></happyShopping>
        </cube-slide-item>
      </cube-slide>
    </section>
  </article>
</template>

<script>
  import progressBar from "@/components/common/progressBar.vue";
  import supermarketMenu from "@/components/dangjian/mall/supermarketMenu.vue";
  import happyShopping from "@/components/dangjian/mall/happyShopping.vue";
  import courseExperience from "@/components/dangjian/mall/courseExperience.vue";
  import enjoyScenicspot from "@/components/dangjian/mall/enjoyScenicspot.vue";
  import supermarketHead from "@/components/dangjian/mall/supermarketHead.vue";
  import tools from "@/utils/tools";
  import api from "@/common/config/api";
  import $ from "../../../../static/js/jquery-1.12.4.min";

  export default {
    components: {
      progressBar,
      supermarketMenu,
      happyShopping,
      supermarketHead,
      courseExperience,
      enjoyScenicspot,
    },
    name: "supermarketHome",
    data() {
      return {
        readOnly: false,
        isShowbdt: false,
        num: 0,
        routeName: 1,
        routeIndex: 1,
        currentIndex: "0", //积分区间选中
        isLoading: true,
        isLoadingTop: true,
        mallGetStore:false,
        options: {
          pullUpLoad: true,
          scrollbar: false,
          pullDownRefresh: {
            threshold: 90,
            stop: 0,
            txt: " ",
          },
        },
        fn: tools,
        pageIndex: 1,
        userInfo: {},
        partyInfo: {},
        sysFile: {},
        todayData: {},
        myIntegrals: {},
        swipeData: [],
        ticketInfo: {
          pic: "",
        },
        agriculture: {},//助农
        routeNameList: [],
        getDict: [],
        slider: [],
        low: "", //积分区间-低
        hight: "", //积分区间-高

        loop: false,
        autoPlay: false,
        showDots: false,
        slideOptions: {
          listenScroll: true,
          probeType: 3,
          directionLockThreshold: 0,
        },
        getKey:'1' //判断是否走新页面 1 走老页面 0 新页面
      };
    },
    watch: {
      routeIndex(newVal) {
        this.$nextTick(() => {
          this.$refs.slide &&
          this.$refs.slide.slide &&
          this.$refs.slide.slide.goToPage(newVal - 1, 0, 300);
        });
      },
      routeName(newVal) {
        this.$nextTick(() => {
          var menuW = $(".top-menu").width();
          var tabLen = $(".top-menu").children().length;
          var activeDom = $(".top-menu").children(".active");
          var activeL = activeDom.offset().left;
          var activeW = activeDom.outerWidth();
          if (activeL <= 0) {
            $(".top-menu").animate({scrollLeft: 0}, 300);
          }
          if (activeL >= menuW) {
            $(".top-menu").animate({scrollLeft: activeW * (tabLen - 5)}, 300);
          }
        });
      },
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        if (to.name === 'supermarketHome') {
          to.meta.keepAlive = true
          vm.$refs.refresh.myIntegral() //刷新页面积分
          vm.$store.commit('addRoute', 'supermarketHome')
        }
        next()
      })
    },
    beforeRouteLeave(to, from, next) {
      this.$route.meta.keepAlive = to.name === 'mallDetail' || to.name === 'mallForRecordDetail' || to.name === 'mallIntroduction'
      if (this.$route.meta.keepAlive) {
        this.$store.commit('addRoute', 'supermarketHome')
      } else {
        this.$store.commit('removeRoute', 'supermarketHome')
        this.$destroy()
      }
      next()
    },
    created() {
      this.getDictValue();
      console.log('请求了')
      this.options.pullUpLoad = true;
      this.userInfo = this.$localStorage.get("userInfo");
      let pInfo = this.$localStorage.get("partyInfo");
      if (pInfo) {
        this.partyInfo = pInfo;
      }
      this.getDictValueRouter();
      this.myIntegral();
      this.getAgriculture();
      this.getTicket();
      this.getData();
    },
    methods: {
      /*左右滑动事件*/
      changePage(current) {
        this.routeName = Number(current) + 1;
        console.log("滑动num", this.routeName);
      },
      back() {
        this.$router.replace({
          path: "/personalcenter",
        });
      },
      //点击tab
      goTo(num) {
        this.readOnly = true;
        this.routeName = num;
        this.routeIndex = num;
        this.readOnly = false;
      },
      //点击商品进入详情
      exchange(data) {
        this.$router.push({path: "mallForRecordDetail"});
        sessionStorage.setItem("commodityInfo", JSON.stringify(data));
      },
      //兑换记录
      exchangeRecord() {
        this.$router.push({path: "mallForRecordList"});
      },
      //跳转积分区间
      go(data, index) {
        this.isShowbdt = false;
        this.low = data.low;
        this.hight = data.hight;
        console.log("this.ticketInfo", index);
        if (
          this.myIntegrals.totalScore >= this.ticketInfo.pointPrice &&
          index == 1
        ) {
          this.isShowbdt = true;
        }
        if (index == 0) {
          this.isShowbdt = true;
        }
        if (
          this.ticketInfo.pointPrice >= this.low &&
          this.ticketInfo.pointPrice <= this.hight
        ) {
          this.isShowbdt = true;
        }
        this.pageIndex = 1;
        this.currentIndex = index;
        this.swipeData = []; //
        this.getData(data.low, data.hight);
      },
      //积分详情
      detail() {
        this.$router.push({path: "scoreDetail"});
      },
      //请求字典值
      getDictValue() {
        let data = {
          catKey: "CAT_MALL_",
          treeKey: "MERCHANTS_TYPE_",
        };
        this.fetchService.dictValue(data).then((res) => {
          console.log("this.fetchService.dictValue", res.data);
          if (res.code === 0) {
            this.getDict = res.data;
            sessionStorage.setItem("getDict", JSON.stringify(res.data));
          }
        });
      },
      myIntegral() {
        let data = {
          userId: this.userInfo.id,
        };
        this.fetchService.myIntegral(data.userId).then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message);
          }
          this.myIntegrals = res.data;
          this.slider = [
            {
              title: "全部",
              low: "",
              hight: "",
            },
            {
              title: "我能兑换",
              low: 0,
              hight: this.myIntegrals.totalScore,
            },
            {
              title: "1-500",
              low: 1,
              hight: 500,
            },
            {
              title: "500-1000",
              low: 501,
              hight: 1000,
            },
            {
              title: "1000以上",
              low: 1001,
              hight: "",
            },
          ];
        });
      },
      getTicket() {
        //获取补答题券
        let parame = {
          pageNo: 0,
          pageSize: 0,
          pointPriceEnd: "",
          pointPriceStart: "",
          publishStatus: 0,
          storeId: "",
          verifyStatus: 0,
        };
        this.fetchService.mallProductHybPage(parame).then((res) => {
          if (res.code == 0 && res.data.length > 0) {
            this.ticketInfo = res.data[0];
            if (this.ticketInfo.pic) {
              this.isShowbdt = true;
            }
          }
        });
      },
      getAgriculture() {
        //获取红云助农
        let storeId = 'ggsxshid';
        let data ={
          "pageNo": 1,
          "pageSize": 1,
          "storeId": storeId,
        }
        this.fetchService.mallProductInfoPage(data).then(res =>{
          if(res.count>0){
            this.mallGetStore = true
            this.fetchService.mallGetStore(storeId)
              .then((res) => {
                if (res.code == 0) {
                  this.agriculture = res.data;
                  console.log('this.agriculture',this.agriculture);
                }
              });
          }
        });
      },
      mallDetail(data) {
        this.$router.push({path: "mallDetail"});
        sessionStorage.setItem("mallInfo", JSON.stringify(data));
      },
      getData(data1, data2) {
        this.isLoading = true;
        let parame = {
          pageNo: this.pageIndex,
          pageSize: 20,
          pointPriceEnd: data2,
          pointPriceStart: data1,
          publishStatus: "",
          verifyStatus: "",
        };
        this.fetchService.mallProductHotPage(parame).then((res) => {
          this.isLoading = false;
          if (res.code !== 0) {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
            return tools.tip(res.message);
          }
          if (res.data.length < 1) {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
            this.options.pullUpLoad = false;
            return;
          }

          if (
            this.swipeData.length > 0 &&
            !this.isHasFocus(this.swipeData[0].productId, res.data)
          ) {
            this.swipeData = this.swipeData.concat(res.data);
          } else {
            this.swipeData = res.data;
          }
          this.pageIndex++;
          setTimeout(() => {
            this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          }, 100);
        });
      },
      onPullingUp() {
        console.log("onPullingUp");
        this.getData(this.low, this.hight);
      },
      onPullingDown() {
        this.swipeData = [];
        this.options.pullUpLoad = true;
        console.log("onPullingDown");
        this.pageIndex = 1;
        this.getTicket();
        this.getData(this.low, this.hight);
      },
      getDictValueRouter() {
        this.isLoadingTop = true
        let data = {
          catKey: "CAT_MALL_",
          treeKey: "MERCHANTS_TYPE_",
        };
        this.fetchService.dictValue(data).then((res) => {
          this.isLoadingTop = false
          if (res.code === 0) {
            this.routeNameList = res.data;
          }
        });
      },
      /*判断是否存在某个值*/
      isHasFocus(userId, list) {
        let ret = false;
        list.some((v) => {
          if (v.productId === userId) {
            ret = true;
            return false;
          }
        });
        return ret;
      },
      //请求字典值
      /*getDictValue() {
        let data = {
          catKey: "CAT_MALL_",
          treeKey: "IS_OPEN",
        };
        this.fetchService.dictValue(data).then((res) => {
          console.log("this.fetchService.dictValue", res.data);
          if(res.code !== 0){
            return
          }
          if (res.code === 0 && res.data.length>0) {
            this.getKey = res.data[0].key;
            console.log('this.getDict',this.getKey);
          }else{
            this.getKey = '1'
          }
        });
      },*/
    },
  };
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";

  .page {
    .head-btn {
      font-size: 12PX;
      border: 0;
    }
  }

  .mine-page {
    padding: 0;

    .header {
      justify-content: space-between;
      margin-bottom: pxToRem(0px);
      position: relative;

      .head-btn {
        border: 0;
      }

      .message {
        .head-btn-text {
          font-size: 14PX;
        }
      }
    }
  }
  .score-hd {
    height: 242px;
    text-align: center;
    background: url("../../../../static/images/dangjian/mine/bg-mine-hd.png") $theme-color no-repeat center;
    background-size: 100% auto;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .score-head {
      width: 118px;
      height: 118px;
      border-radius: 50%;
      overflow: hidden;
      border: 4px solid #ea7676;

      img {
        height: 100%;
        width: 100%;
      }
    }

    .score-text {
      margin-right: 50px;
      text-align: left;

      .score-tip {
        .score-tip-text {
          vertical-align: super;
          color: #ffffff;
          margin-right: 15px;
        }
      }

      img {
        width: 15px;
        margin-bottom: 5px;
      }
    }

    .form-Only {
      pointer-events: none;
    }

    .score-play {
      width: 171px;
      height: 46px;
      line-height: 46px;
      background: #e20001;
      border: 1px solid #ffffff;
      border-radius: 10px;
      color: #ffffff;

      img {
        width: 25px;
        height: 25px;
        vertical-align: text-top;
        margin-right: 5px;
      }
    }

    .score {
      font-size: 56PX;
      line-height: 1.2em;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      margin-right: 10px;
    }

    .tip {
      font-size: 12PX;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }

  .top-menu {
    display: flex;
    justify-content: flex-start;
    padding: 0 pxToRem(0px);
    background: rgba(255, 255, 255, 1);
    border: 1px solid #e5e5e5;
    width: 100vw;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar,
    &::-webkit-scrollbar {
      width: 0px;
      height: 0px;
    }

    li {
      font-size: 14PX;
      font-weight: 400;
      width: 20%;
      flex-shrink: 0;
      text-align: center;
      color: rgba(0, 0, 0, 1);
      padding: pxToRem(10px) 0;
      line-height: pxToRem(60px);
      margin: auto;

      &.active {
        font-size: 16PX;
        border-bottom: 2px solid $theme-color;
        font-weight: bold;
        color: rgba(226, 0, 1, 1);

        span {
          font-size: 16PX;
        }
      }

      span {
        font-size: 14PX;
        font-weight: bold;
      }
    }
  }

  .element::-webkit-scrollbar {
    display: none;
  }

  .screen {
    width: 100%;
    height: 108px;
    background: #fff;

    .screen-menu {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;

      li {
        font-size: 14PX;
        padding: 6px 10px;
        border: 1px solid #e5e5e5;
        border-radius: 10px;

        &.active {
          border: 1px solid #e20002;
          font-weight: bold;
          color: #e20002;
        }
      }
    }
  }

  .red-car {
    position: relative;
    margin-top: -60px;
    background: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 29px 34px;
    margin-bottom: 0;

    &::after {
      position: absolute;
      top: 50%;
      right: 40px;
      transform: translateY(-50%);
      content: "";
      width: pxToRem(16px);
      height: pxToRem(25px);
      background: rgba(199, 199, 204, 1);
      background: url("../../../../static/images/dangjian/dangwu/arrow-left.png") no-repeat center;
      background-size: auto 100%;
    }

    .img {
      width: 101px;
      height: 94px;
      margin-right: 32px;

      img {
        @include fullImg();
      }
    }

    .cont {
      .title {
        font-size: 30PX;
        line-height: 1em;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }

      .tip {
        font-size: 24PX;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }
    }
  }

  .zhunong-list {
    margin: 3%;

    .ticketInfo {
      width: 100%;
      height: 3.2rem;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .goods-list {
    margin: 0 0 3%;

    .ticketInfo {
      width: 100%;
      height: 165px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .hd {
      .hd-title {
        font-size: 36PX;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }

      .tip {
        font-size: 24PX;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 60px;

        span {
          padding-left: 10px;
        }
      }
    }

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 37px 0;
      border-bottom: 1px solid $border-color;

      &:last-child {
        border: none;
      }

      .cont {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .img {
          width: 140px;
          height: 140px;
          position: relative;
          overflow: hidden;
          border-radius: 10px;
          text-align: center;
          margin-right: 25px;

          img {
            position: absolute;
            z-index: 2;
            width: 100%;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
          }
        }

        .title {
          font-size: $titleFontSize;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
        }

        .tip {
          font-size: $tipFontSize;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }

        .tip-sub {
          display: flex;
          font-size: $titleFontSize;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);

          .progress {
            font-size: 0;
          }
        }
      }

      .btn {
        width: 114px;
        height: 60px;
        line-height: 60px;
        background: rgba(242, 242, 242, 1);
        border-radius: 4px;
        font-size: 28PX;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        text-align: center;

        &.btn-red {
          background: rgba(255, 255, 255, 1);
          border: 1px solid $theme-color;
          border-radius: 4px;
          font-size: 28PX;
          font-weight: 400;
          color: $theme-color;
        }
      }
    }
  }

  .screen-main {
    margin: 3%;

    .swipe-box {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
    }

    .box {
      width: 48%;
    }

    .item {
      height: 6.8rem;
      background: #ffffff;
      box-shadow: 0px 5px 20px 0px rgba(0, 0, 59, 0.1);
      border-radius: 10px;
      padding: 20px 22px;
      text-align: center;
      margin-bottom: 20px;

      .item-img {
        display: inline-block;
        width: 296px;
        height: 296px;
        background: #f6f6f6;
      }

      .item-info {
        text-align: left;
        height: 3em;

        .left {
          font-size: 14PX;
          text-align: left;
          height: 1.2rem;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          /*display: -ms-flexbox;*/
          /*display: flex;*/
          display: -webkit-box;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -ms-flex-direction: column;
          flex-direction: column;
        }

        .right {
          font-size: 12PX;
          float: right;
          color: #999999;
        }
      }

      .tip {
        font-size: 12PX;
        text-align: left;
        color: #000000;
        margin-top: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-direction: column;
        flex-direction: column;
        .tip-num {
          color: #ec0c0c;
          font-size: 14PX;
          margin-right: 10px;
        }

        .right {
          float: right;
          font-size: 12PX;
          width: 120px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          /*border: 1px solid #ec0c0c;*/
          border-radius: 10px;

          > span {
            color: #ec0c0c;
            font-size: 14PX;
          }
        }
      }
    }
  }
</style>
